<template>
  <div class="checkradio-selector">
    <div 
      class="check-radio" 
      v-for="(item, index) in radioCheckInfo.data" 
      :key="item.id"
    >
      <input 
        name='checked hover-style'
        :type='radioCheckInfo.type' 
        :id='item.id'
        :value="index"
        v-model="checkedData"
      />
      <label :for='item.id' class="label hover-style">
        {{item.label}}
      </label>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
  props: {
    radioCheckInfo: {
      type: Object,
      default: {
        type: 'checkbox',
        data: [
          {
            label: '万',
            id: 'the-thousand'
          },
          {
            context: '千',
            id: 'thousand'
          },
        ]
      }
    }
  },
  data() {
    return {
      checkedData: 0
    }
  },
  created() {
    // this.checkedData = this.getParameterType
  },
  methods: {
    ...mapMutations('lottery', {
      setParameterType: 'SET_PARAMETER_TYPE'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getParameterType'])
  },
  watch: {
    checkedData(newVal, oldVal) {
      this.$emit('click', newVal)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
.checkradio-selector 
  display flex
 .check-radio 
    position: relative
    height: 16px
    width 70px
    input 
      position: absolute
      left: 12px
      top: 0
      width: 16px
      height:16px
      opacity 0
    input[type='checkbox']
      &:checked 
        ~ .label:before
            border-color: $color-theme-red
    input[type='checkbox']
      &:checked 
        ~ .label:after
            background: $color-theme-red
    input[type='radio']
      &:checked 
        ~ .label:before
            border-color: $color-theme-red
    input[type='radio']
      &:checked 
        ~ .label:after
            background: $color-theme-red      
    label 
      position: absolute
      right 0
      line-height: 16px
      top: 0px
      &.label:before 
        content: ''
        position: absolute
        left: -30px
        top: -0px
        display: inline-block
        width: 15px
        height: 15px
        border-radius: 50%
        border: 1px solid #ddd
        transition: all 0.1s ease
      &.label:after 
        content: ''
        position: absolute
        left: -27px
        top: 0px
        display: inline-block
        width: 11px
        height: 11px
        border-radius: 50%
        margin-top: 3px
        margin-left: 0px
        transition: all 0.1s ease
        
</style>